<template>
	<view>
		<view v-for="(item, index) in couponList" :key="index" class="coupon_box">
			<view class="left">
				<view class="left_top">
					<text class="hui" :style="'background:' + colors">{{item.free_type == 1 ?"减":"折" }}</text>
					<text class="hui_name">{{item.name}}</text>
				</view>
				<view class="left_bottom">
					<text> <slot>有效期：</slot>{{item.end_time}}</text>
				</view>
			</view>
			<image :src="used_url" class="ysy" v-if="item.status == 1"></image>
			<image :src="no_url" class="ysy" v-if="item.status == 2"></image>
			<view class="right" :style="'background:' + (item.status > 0 ? '' : colors)">
				<view class="money" v-if="item.free_type == 1">￥{{item.coupon_price}}</view>
				<view class="money" v-else>{{item.coupon_price}} 折</view>
				<text>满{{item.price}}可用</text>
			</view>
		</view>
	</view>
</template>

<script>
	import  {parseTime, param2Array}  from '@/util/index.js'
	
	export default {
		name:"coupon-list",
		data() {
			return {
				used_url:"https://www.zztengma.com/lihu/bumang/images/ysy.png",
				no_url:"https://www.zztengma.com/lihu/bumang/images/ygq.png",
			};
		},
		props: {
			colors: {
				type: String
			},
			couponList: {
				type: Array
			}
		},
		methods: {

			jumpNext(item) {
				this.$emit("itemClick",item);
			},
			getDate(item){
				if(item.time_type == 1) return  " 领取后 " + item.receive_after_day + " 天";
				if(item.time_type == 0) return  parseTime(item.receive_start_time, '{y}-{m}-{d}') + " - "  + parseTime(item.receive_end_time, '{y}-{m}-{d}');
			}

		}
	};
</script>
		
		<style scoped lang="scss">
			.coupon_box {
				
				margin: 28upx 28upx;
				box-shadow: 0upx 0upx 10upx #ddd;
				position: relative;
				border-radius: 10upx;
				overflow: hidden;
				background: #fff;
				
			}
			
			.coupon_box .left {
				width: 70%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding: 20upx;
				float: left;
			}
			
			.coupon_box .left .hui {
				width: 40upx;
				height: 40upx;
				font-size: 20upx;
				color: #fff;
				background-color: #EC1818;
				border-radius: 8upx;
				line-height: 40upx;
				text-align: center;
				display: inline-block;
				transform: translateY(-5upx);
			}
			
			.coupon_box .left .left_top {
				width: 60vw;
				display: block;
				font-size: 26upx;
				font-weight: bold;
			
			}
			
			.left_top .hui_name {
				line-height: 60upx;
				height: 60upx;
				margin-left: 20upx;
				display: inline-block;
			}
			
			.left_bottom {
				font-size: 24upx;
				font-weight: bold;
				color: #333;
				height: 60upx;
				line-height: 60upx;
			}
			
			.coupon_box .right {
				text-align: center;
				height: 160upx;
				width: 180upx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-content: center;
				background-color: #A8A8A8;
				float: right;
			}
			
			.coupon_box .right .shiyong {
				height: 40upx;
				line-height: 40upx;
				background-color: #fff;
				border-radius: 20upx;
				padding: 0 20upx;
				color: #A8A8A8;
				
			}
			
			.coupon_box .right .money {
				font-size: 45upx;
				color: #fff;
			}
			
			.coupon_box .right text {
				font-size: 24upx;
				color: #fff;
				height: 40upx;
				line-height: 34upx;
			}
			
			.coupon_box .bottom {
				height: 60upx;
				line-height: 60upx;
				display: flex;
				align-content: flex-start;
				font-size: 24upx;
				margin-top: 10upx;
			}
			
			.coupon_box .bottom view {
				margin-right: 20upx;
				color: #888;
				font-weight: bold;
			}
			
			.ysy {
				width: 80upx;
				height: 80upx;
				position: absolute;
				top: 20upx;
				right: 200upx;
			}
			
		</style>